<!-- loading -->
<template>
  <transition name="custom-loading-fade">
    <!--loading蒙版-->
    <div v-show="visible" class="custom-loading-mask">
      <!--loading中间的图标-->
      <div class="custom-loading-spinner">
        <div class="loading">
            <div><span></span></div>
            <div><span></span></div>
            <div><span></span></div>
        </div>
        <!--loading上面显示的文字-->
        <p class="custom-loading-text">{{ text }}</p>
      </div>
    </div>
  </transition>
</template>
<script>
export default {
  data() {
    return {
      text: '',
      visible: false
    }
  }
}
</script>
<style scoped>
.custom-loading-spinner{
  position:absolute;
  top:50%;
  left:50%;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  transform:translate(-50%,-50%);
}
.custom-loading-mask{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(205, 205, 205, 0.7);
}
.custom-loading-text{
  text-align: center;
  padding: 20px;
  color: rgb(255, 66, 66);
  font-size: 17px;
}
.loading{
  width: 60px;
  height: 60px;
  margin: 0 auto;
  margin-top:100px;
  position: relative;
  -webkit-animation: load 3s linear infinite;
}
.loading div{
  width: 100%;
  height: 100%;
  position: absolute;
}
.loading span{
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #99CC66;
  position: absolute;
  left: 50%;
  margin-top: -10px;
  margin-left: -10px;
  -webkit-animation: changeBgColor 3s ease infinite;
}
@-webkit-keyframes load{
  0%{
      -webkit-transform: rotate(0deg);
  }
  33.3%{
      -webkit-transform: rotate(120deg);
  }
  66.6%{
      -webkit-transform: rotate(240deg);
  }
  100%{
      -webkit-transform: rotate(360deg);
  }
}
@-webkit-keyframes changeBgColor{
  0%,100%{
      background: #99CC66;
  }
  33.3%{
      background: #FFFF66;
  }
  66.6%{
      background: #FF6666;
  }
}
.loading div:nth-child(2){
  -webkit-transform: rotate(120deg);
}
.loading div:nth-child(3){
  -webkit-transform: rotate(240deg);
}
.loading div:nth-child(2) span{
  -webkit-animation-delay: 1s;
}
.loading div:nth-child(3) span{
  -webkit-animation-delay: 2s;
}
</style>